Reactin useSyncExternalStore: Ulkoisen tilan integroinnin hallinta

Reactin useSyncExternalStore-hook, joka esiteltiin React 18:ssa, tarjoaa tehokkaan ja suorituskykyisen tavan integroida ulkoisia tietolähteitä ja tilanhallintakirjastoja React-komponentteihisi. Tämä hook mahdollistaa komponenttien tilaamisen ulkoisten storejen muutoksille, varmistaen, että käyttöliittymä heijastaa aina viimeisintä dataa ja optimoi samalla suorituskykyä. Tämä opas tarjoaa kattavan yleiskatsauksen useSyncExternalStore-hookista, käsittäen sen ydinasiat, käyttötavat ja parhaat käytännöt.

Miksi useSyncExternalStore-hookia tarvitaan

Monissa React-sovelluksissa tulee vastaan tilanteita, joissa tilaa on hallittava komponenttipuun ulkopuolella. Näin on usein käsiteltäessä:

• Kolmannen osapuolen kirjastoja: Integroituminen kirjastoihin, jotka hallinnoivat omaa tilaansa (esim. tietokantayhteys, selainrajapinta tai fysiikkamoottori).
• Jaettua tilaa komponenttien välillä: Tilanhallinta, joka on jaettava komponenttien välillä, jotka eivät ole suoraan yhteydessä toisiinsa (esim. käyttäjän todennustila, sovelluksen asetukset tai globaali tapahtumaväylä).
• Ulkoisia tietolähteitä: Datan noutaminen ja näyttäminen ulkoisista API-rajapinnoista tai tietokannoista.

Perinteiset tilanhallintaratkaisut, kuten useState ja useReducer, soveltuvat hyvin paikallisen komponenttitilan hallintaan. Niitä ei kuitenkaan ole suunniteltu käsittelemään ulkoista tilaa tehokkaasti. Niiden suora käyttö ulkoisten tietolähteiden kanssa voi johtaa suorituskykyongelmiin, epäjohdonmukaisiin päivityksiin ja monimutkaiseen koodiin.

useSyncExternalStore vastaa näihin haasteisiin tarjoamalla standardoidun ja optimoidun tavan tilata muutoksia ulkoisista storeista. Se varmistaa, että komponentit renderöidään uudelleen vain, kun relevantti data muuttuu, minimoiden tarpeettomat päivitykset ja parantaen yleistä suorituskykyä.

useSyncExternalStore-hookin peruskäsitteet

useSyncExternalStore ottaa kolme argumenttia:

1. subscribe: Funktio, joka ottaa callback-funktion argumentiksi ja tilaa ulkoisen storen muutokset. Callback-funktiota kutsutaan aina, kun storen data muuttuu.
2. getSnapshot: Funktio, joka palauttaa tilannekuvan (snapshot) datasta ulkoisesta storesta. Tämän funktion tulisi palauttaa vakaa arvo, jota React voi käyttää määrittämään, onko data muuttunut. Sen on oltava puhdas ja nopea.
3. getServerSnapshot (valinnainen): Funktio, joka palauttaa storen alkuarvon palvelinpuolen renderöinnin aikana. Tämä on ratkaisevan tärkeää sen varmistamiseksi, että alkuperäinen HTML vastaa asiakaspuolen renderöintiä. Sitä käytetään VAIN palvelinpuolen renderöintiympäristöissä. Jos se jätetään pois asiakaspuolen ympäristössä, sen sijaan käytetään getSnapshot-funktiota. On tärkeää, että tämä arvo ei koskaan muutu sen jälkeen, kun se on alun perin renderöity palvelinpuolella.

Tässä on erittely kustakin argumentista:

1. subscribe

subscribe-funktion vastuulla on luoda yhteys React-komponentin ja ulkoisen storen välille. Se vastaanottaa callback-funktion, jota sen tulisi kutsua aina, kun storen data muuttuu. Tätä callback-funktiota käytetään tyypillisesti käynnistämään komponentin uudelleenrenderöinti.

Esimerkki:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

Tässä esimerkissä store.addListener lisää callback-funktion storen kuuntelijalistaan. Funktio palauttaa siivousfunktion, joka poistaa kuuntelijan, kun komponentti poistetaan näkyvistä (unmount), estäen muistivuotoja.

2. getSnapshot

getSnapshot-funktion vastuulla on noutaa tilannekuva datasta ulkoisesta storesta. Tämän tilannekuvan tulisi olla vakaa arvo, jota React voi käyttää määrittämään, onko data muuttunut. React käyttää Object.is-metodia vertaillakseen nykyistä tilannekuvaa edelliseen. Siksi sen on oltava nopea, ja on erittäin suositeltavaa, että se palauttaa primitiiviarvon (merkkijono, numero, boolean, null tai undefined).

Esimerkki:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

Tässä esimerkissä store.getData palauttaa nykyisen datan storesta. React vertaa tätä arvoa edelliseen arvoon määrittääkseen, onko komponentti renderöitävä uudelleen.

3. getServerSnapshot (valinnainen)

getServerSnapshot-funktio on relevantti vain, kun käytetään palvelinpuolen renderöintiä (SSR). Tätä funktiota kutsutaan alkuperäisen palvelinrenderöinnin aikana, ja sen tulosta käytetään storen alkuarvona ennen kuin hydraatio tapahtuu asiakaspuolella. Johdonmukaisten arvojen palauttaminen on ratkaisevan tärkeää onnistuneen SSR:n kannalta.

Esimerkki:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

Tässä esimerkissä `store.getInitialDataForServer` palauttaa alkuperäisen datan, joka sopii palvelinpuolen renderöintiin.

Peruskäyttöesimerkki

Tarkastellaan yksinkertaista esimerkkiä, jossa meillä on ulkoinen store, joka hallinnoi laskuria. Voimme käyttää useSyncExternalStore-hookia näyttääksemme laskurin arvon React-komponentissa:

            // Ulkoinen store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-komponentti
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Tässä esimerkissä createStore luo yksinkertaisen ulkoisen storen, joka hallinnoi laskurin arvoa. Counter-komponentti käyttää useSyncExternalStore-hookia tilatakseen muutoksia storesta ja näyttääkseen nykyisen laskurin arvon. Kun kasvatuspainiketta napsautetaan, setState-funktio päivittää storen arvon, mikä käynnistää komponentin uudelleenrenderöinnin.

Integrointi tilanhallintakirjastojen kanssa

useSyncExternalStore on erityisen hyödyllinen integroitavaksi tilanhallintakirjastojen, kuten Zustandin, Jotain ja Recoilin, kanssa. Nämä kirjastot tarjoavat omat mekanisminsa tilanhallintaan, ja useSyncExternalStore mahdollistaa niiden saumattoman integroinnin React-komponentteihisi.

Tässä on esimerkki integroinnista Zustandin kanssa:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand-store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React-komponentti
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand yksinkertaistaa storen luomista. Sen sisäisiä subscribe- ja getSnapshot-toteutuksia käytetään implisiittisesti, kun tilaat tietyn tilan.

Tässä on esimerkki integroinnista Jotain kanssa:

            import { atom, useAtom } from 'jotai'

// Jotai-atomi
const countAtom = atom(0)

// React-komponentti
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai käyttää atomeja tilanhallintaan. useAtom käsittelee sisäisesti tilauksen ja tilannekuvien ottamisen.

Suorituskyvyn optimointi

useSyncExternalStore tarjoaa useita mekanismeja suorituskyvyn optimoimiseksi:

• Valikoivat päivitykset: React renderöi komponentin uudelleen vain, kun getSnapshot-funktion palauttama arvo muuttuu. Tämä varmistaa, että tarpeettomia uudelleenrenderöintejä vältetään.
• Päivitysten niputtaminen: React niputtaa päivitykset useista ulkoisista storeista yhteen ainoaan uudelleenrenderöintiin. Tämä vähentää uudelleenrenderöintien määrää ja parantaa yleistä suorituskykyä.
• Vanhentuneiden closure-viittausten välttäminen: useSyncExternalStore varmistaa, että komponentilla on aina pääsy viimeisimpään dataan ulkoisesta storesta, jopa käsiteltäessä asynkronisia päivityksiä.

Suorituskyvyn optimoimiseksi edelleen, harkitse seuraavia parhaita käytäntöjä:

• Minimoi getSnapshot-funktion palauttaman datan määrä: Palauta vain se data, jota komponentti todella tarvitsee. Tämä vähentää vertailtavan datan määrää ja parantaa päivitysprosessin tehokkuutta.
• Käytä muistiinpanotekniikoita (memoization): Tallenna kalliiden laskutoimitusten tai datamuunnosten tulokset muistiin. Tämä voi estää tarpeettomia uudelleenlaskentoja ja parantaa suorituskykyä.
• Vältä tarpeettomia tilauksia: Tilaa ulkoinen store vain, kun komponentti on todella näkyvissä. Tämä voi vähentää aktiivisten tilausten määrää ja parantaa yleistä suorituskykyä.
• Varmista, että getSnapshot palauttaa uuden *vakaan* objektin vain, jos data on muuttunut: Vältä uusien objektien/taulukoiden/funktioiden luomista, jos taustalla oleva data ei ole todella muuttunut. Palauta sama objekti viittauksella, jos mahdollista.

Palvelinpuolen renderöinti (SSR) ja useSyncExternalStore

Kun useSyncExternalStore-hookia käytetään palvelinpuolen renderöinnin (SSR) kanssa, on olennaista tarjota getServerSnapshot-funktio. Tämä funktio varmistaa, että palvelimella renderöity alkuperäinen HTML vastaa asiakaspuolen renderöintiä, estäen hydraatiovirheitä ja parantaen käyttäjäkokemusta.

Tässä on esimerkki getServerSnapshot-funktion käytöstä:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Tärkeää SSR:lle

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-komponentti
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Tässä esimerkissä getServerSnapshot palauttaa laskurin alkuarvon. Tämä varmistaa, että palvelimella renderöity alkuperäinen HTML vastaa asiakaspuolen renderöintiä. `getServerSnapshot`-funktion tulisi palauttaa vakaa ja ennustettava arvo. Sen tulisi myös suorittaa sama logiikka kuin getSnapshot-funktio palvelimella. Vältä selainkohtaisten API-rajapintojen tai globaalien muuttujien käyttöä getServerSnapshot-funktiossa.

Edistyneet käyttötavat

useSyncExternalStore-hookia voidaan käyttää monissa edistyneissä skenaarioissa, mukaan lukien:

• Integrointi selainrajapintojen (API) kanssa: Selainrajapintojen, kuten localStorage tai navigator.onLine, muutosten tilaaminen.
• Mukautettujen hookien luominen: Ulkoisen storen tilauslogiikan kapselointi mukautettuun hookiin.
• Käyttö Context API:n kanssa: useSyncExternalStore-hookin yhdistäminen Reactin Context API:n kanssa jaetun tilan tarjoamiseksi komponenttipuulle.

Katsotaanpa esimerkkiä mukautetun hookin luomisesta localStorage-tilauksia varten:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Käynnistetään storage-tapahtuma manuaalisesti saman sivun päivityksiä varten
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

Tässä esimerkissä useLocalStorage on mukautettu hook, joka tilaa muutoksia localStorage-säilössä. Se käyttää useSyncExternalStore-hookia hallitakseen tilausta ja noutaakseen nykyisen arvon localStorage-säilöstä. Se myös lähettää oikein storage-tapahtuman varmistaakseen, että päivitykset samalla sivulla heijastuvat (koska `storage`-tapahtumat laukeavat vain muissa välilehdissä). serverSnapshot varmistaa, että alkuarvot annetaan oikein palvelinympäristöissä.

Parhaat käytännöt ja yleiset sudenkuopat

Tässä on joitakin parhaita käytäntöjä ja yleisiä sudenkuoppia, joita kannattaa välttää käytettäessä useSyncExternalStore-hookia:

• Vältä ulkoisen storen suoraa muokkaamista: Käytä aina storen omaa rajapintaa datan päivittämiseen. Storen suora muokkaaminen voi johtaa epäjohdonmukaisiin päivityksiin ja odottamattomaan käytökseen.
• Varmista, että getSnapshot on puhdas ja nopea: getSnapshot-funktiolla ei saisi olla sivuvaikutuksia, ja sen tulisi palauttaa vakaa arvo nopeasti. Kalliit laskutoimitukset tai datamuunnokset tulisi tallentaa muistiin.
• Tarjoa getServerSnapshot-funktio käytettäessä SSR:ää: Tämä on ratkaisevan tärkeää sen varmistamiseksi, että palvelimella renderöity alkuperäinen HTML vastaa asiakaspuolen renderöintiä.
• Käsittele virheet siististi: Käytä try-catch-lohkoja mahdollisten virheiden käsittelyyn, kun käytät ulkoista storea.
• Siivoa tilaukset: Peruuta aina tilaus ulkoisesta storesta, kun komponentti poistetaan näkyvistä, estääksesi muistivuotoja. subscribe-funktion tulisi palauttaa siivousfunktio, joka poistaa kuuntelijan.
• Ymmärrä suorituskykyvaikutukset: Vaikka useSyncExternalStore on optimoitu suorituskykyä varten, on tärkeää ymmärtää ulkoisten storejen tilaamisen mahdolliset vaikutukset. Minimoi getSnapshot-funktion palauttaman datan määrä ja vältä tarpeettomia tilauksia.
• Testaa perusteellisesti: Varmista, että integraatio storen kanssa toimii oikein eri skenaarioissa, erityisesti palvelinpuolen renderöinnissä ja samanaikaisuustilassa (concurrent mode).

Yhteenveto

useSyncExternalStore on tehokas ja suorituskykyinen hook ulkoisten tietolähteiden ja tilanhallintakirjastojen integroimiseksi React-komponentteihisi. Ymmärtämällä sen peruskäsitteet, käyttötavat ja parhaat käytännöt voit tehokkaasti hallita jaettua tilaa React-sovelluksissasi ja optimoida suorituskykyä. Olitpa sitten integroimassa kolmannen osapuolen kirjastoja, hallitsemassa jaettua tilaa komponenttien välillä tai noutamassa dataa ulkoisista API-rajapinnoista, useSyncExternalStore tarjoaa standardoidun ja luotettavan ratkaisun. Ota se käyttöön rakentaaksesi vankempia, ylläpidettävämpiä ja suorituskykyisempiä React-sovelluksia globaalille yleisölle.

Lisälähteet

• Reactin dokumentaatio useSyncExternalStore-hookista
• React 18:n Pull Request, joka esitteli useSyncExternalStore-hookin
• Zustand-tilanhallintakirjasto
• Jotai-tilanhallintakirjasto